<template>
  <div class="keepList">
    <ul>
      <li class="keepitem">
        <div class="keeptop">
          <img src="@/../static/06.jpg" alt="">
          <div class="name">
            <p>vivi妈妈</p>
            <time>3秒前</time>
            <span>宝宝2岁</span>
          </div>
        </div>
        <div class="keepcon">
          <p>清晨起来打开窗，阳光美美哒，看着蝴蝶闻花香，风景美美哒，你在远处看着我，笑容美美哒，我的心就像朵花儿，开的美美哒，我爱你你爱我，感情美美哒，爸爸妈妈身体好，亲情美美哒...</p>
          <b>阅读全文</b>
          <img src="@/../static/06.jpg" alt="">
        </div>
        <div class="comments">
          <ul>
            <li>分享</li>
            <li>评论</li>
            <li><i class="iconfont icon-xin"></i>9999</li>
          </ul>
        </div>
      </li>
      <li class="keepitem" v-for="(item, index) of beiyunlist" :key="index">
        <div class="keeptop">
          <img src="@/../static/06.jpg" alt="">
          <div class="name">
            <!-- <p>{{item.content}}</p> -->
            <time>3秒前</time>
            <span>宝宝2岁</span>
          </div>
        </div>
        <div class="keepcon">
          <p>清晨起来打开窗，阳光美美哒，看着蝴蝶闻花香，风景美美哒，你在远处看着我，笑容美美哒，我的心就像朵花儿，开的美美哒，我爱你你爱我，感情美美哒，爸爸妈妈身体好，亲情美美哒...</p>
          <b>阅读全文</b>
          <img src="@/../static/06.jpg" alt="">
        </div>
        <div class="comments">
          <ul>
            <li>分享</li>
            <li>评论</li>
            <li><i class="iconfont icon-xin"></i>9999</li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      beiyunlist: []
    }
  },
  created () {
    // axios.get('sgj/beiyun/?id=1',
    // ).then(data => {
    //   console.log(data)
    //   this.beiyunlist=data.data.returnvalue3[1]
    // })
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.keepList {
  @include rect(100%, auto);
  ul {
    .keepitem {
      @include rect(100%, 410px);
      background:#EAEAEA;
      margin-bottom:10px;
      .keeptop {
        @include rect(100%, 70px);
        @include flexbox();
        // @include justify-content();
        @include align-items();
        img {
          @include rect(44px, 44px);
          border-radius: 50%;
          float: left;
          margin:0 5px 0rem 2px;        
        }
        .name {
          p {
            @include font-size(14px);
            @include text-color(#6f6e6e);
          }
          time {
            @include font-size(10px);
            @include text-color(#A6A4A4);
          }
          span {
            @include font-size(10px);
            @include text-color(#A6A4A4);
          }
        }
      }
      .keepcon {
        @include rect(96%, 280px);
        margin:0 2%;
        p {
          font-size: 14px;
          color:#5E5E5E;
          line-height:20px;
        }
        b {
          @include rect(100%,40px);
          line-height: 40px;
        }
        img {
          @include rect(100%, 152px);
        }
      }
      .comments {
        @include rect(100%, 60px);
        ul {
          @include rect(100%, 60px);
          @include flexbox();
          @include justify-content(space-around);
          @include align-items();
          li {
            color:#5e5e5e;
            font-size: 12px;
          }
        } 
      }
    }
  }
}
.keepitem:nth-child(1) {
  margin-top: 180px
}
</style>
